<template>
  <div class="grid-item-box" :class="!isTop ? 'bg-box' : ''">
    <div class="flex align-center">
      <img class="margin-right-5" v-if="imgPath" :src="imgPath" />
      <el-tooltip class="item" effect="dark" :disabled="hasTooltip" placement="bottom">
        <div>
          <span class="padding-right-5 font-weight-700 font-size-13">{{ title }}</span>
          <span v-tooltip="title" class="question-box">?</span>
        </div>
        <div slot="content">
          <div style="line-height: 30px" v-html="tips"></div>
        </div>
      </el-tooltip>
      <span v-if="isTop" v-tooltip="title" class="icon el-icon-question padding-left-5"></span>
    </div>
    <div class="font-size-14 font-weight-700">{{ model.totalPlantPrice | moneyFilterNoUnit }}<span class="font-size-14">万元</span></div>
    <div class="plan-item">
      <div class="font-size-12">上一年执行：{{ model.totalLastPlantPrice | moneyFilterNoUnit }}</div>
      <div>
        <span class="font-size-12">差异：</span>
        <template v-if="model.totalPlantPrice == 0 && model.totalLastPlantPrice == 0">
          <span class="font-size-12 color-666666">--</span>
        </template>
        <template v-else-if="model.totalPlantPrice != 0 && model.totalLastPlantPrice == 0">
          <span class="font-size-12 color-666666">本年新增</span>
        </template>
        <template v-else>
          <span v-if="arrowShow" :class="colorClass">{{ deviationRate > 0 ? '+' : '-' }}{{ Math.abs(deviationRate || 0) | accMul }}%</span>
          <span class="color-666666" v-else>{{ deviationRate }}</span>
        </template>
        
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      title: {
        type: String,
        default: '',
      },
      imgPath: {
        type: String,
        default: '',
      },
      isTop: {
        type: Boolean,
        default: false,
      },
      // 13收入 24支出
      normType: {
        type: Number,
        default: 1,
      },
      model: {
        type: Object,
        default: () => {
          return {};
        },
      },
      tips: {
        type: String,
        default: '',
      },
      //tips是否禁止
      hasTooltip: {
        type: Boolean,
        default: true,
      },
    },

    computed: {
      deviationRate() {
        if (this.model.totalLastPlantPrice == 0 && this.model.totalPlantPrice == 0) {
          this.arrowShow = false;
          return '--';
        } else if (Number(this.model.totalLastPlantPrice) != 0 && this.model.totalPlantPrice == 0) {
          this.arrowShow = false;
          return '计划外';
        } else {
          this.arrowShow = true;
          return this.model.totalPlantDeviationPrice;
        }
      },
      colorClass() {
        if (this.normType == 1 || this.normType == 3) {
          return this.model.totalPlantDeviationPrice > 0 ? 'color-green' : 'color-red';
        } else {
          return this.model.totalPlantDeviationPrice > 0 ? 'color-red' : 'color-green';
        }
      },
    },

    data() {
      return {
        arrowShow: false,
      };
    },

    methods: {
      goDictionary(name) {
        let url = '/businessAssets/dataDic/index?token=1BECA34141E04A338B570F70C780C955&menuId=caa9147d6ba64e1a95bd3eeb76cc5203&parentMenuId=7ee2400d0e72437aa3bdb5823497537f&timestamp=1667202507216&keyWord=' + name;
        window.open(url);
      },
    },
  };
</script>

<style lang="scss" scoped>
  .grid-item-box {
    width: 100%;
    border-radius: 5px;
    .plan-item {
      font-size: 12px;
      color: #666;
      .blue {
        color: #29c37f;
      }
      .red {
        color: #eb5757;
      }
    }
    .question-box{
      width: 12px;
      height: 12px;
      line-height: 11px;
    }
  }
  .bg-box {
    background: #f8f8f8;
  }
  img {
    width: 16px;
    height: 16px;
  }
</style>
